<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .item {
          height: 500px;
          border: 1px solid red;
          margin: 10px;
        }
    </style>
</head>
<body>
<div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
    <div class="item">
        <img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649918962&t=d482e694e86d16e4e2513b1eca8516dd"
             alt="">
    </div>
</div>
<script>
  const imgs = document.querySelectorAll('img[data-src]')
  const config = {
    rootMargin: '0px',
    threshold: 0
  }
  let observer = new IntersectionObserver((entries, self) => {
    entries.forEach((entry) => {
      // 检测dom是否出现在视口内
      if (entry.isIntersecting) {
        // 如果出现在视口内，替换data-src属性为src
        // 同时移除data-src和监听事件
        let img = entry.target
        let src = img.dataset.src
        if (src) {
          img.src = src
          img.removeAttribute('data-src')
        }
        // 解除观察
        self.unobserve(entry.target)
      }
    })
  }, config)

  imgs.forEach(image => {
    observer.observe(image)
  })
</script>
</body>
</html>
